<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="js/jquery.fullPage.min.js" type="text/javascript"></script>
    <link href="css/jquery.fullPage.css" rel="stylesheet" type="text/css" />
    <style>
        #menu {
            margin: 0;
            padding: 0;
            position: fixed;
            left: 58%;
            top: 8px;
            list-style-type: none;
            z-index: 70;
        }

        #menu li {
            float: left;
            margin: 0 10px 0 0;
            font-size: 10px;
        }

        #menu a {
            float: left;
            padding: 10px 20px;
            background-color: grey;
            color: #333;
            text-decoration: none;
        }

        #menu .active a {
            color: #fff;
            background-color: #409EFF;
        }

        .section {
            text-align: center;
            font: 50px "Microsoft Yahei";
            color: #fff;
        }
    </style>

    <script>
        $(function () {
            $('#content').fullpage({
                controlArrows: false,
            });
            $()
            $('a').each(function (index) {
                $(this).unbind('click').click(function () {
                    //moveTo方法参数，第一个参数为section的下标，第二个参数为slide的下标
                    //section为纵向切换，slide为横向切换
                    $.fn.fullpage.moveTo(1, index);
                    $("li").removeClass();
                    $(this).parent('li').addClass("active");
                })
            })
        });
    </script>
</head>
<ul id="menu">
    <li data-menuanchor="page1" class="active"><a href="#page1"></a></li>
    <li data-menuanchor="page2"><a href="#page2"></a></li>
    <li data-menuanchor="page3"><a href="#page3"></a></li>
</ul>
<div id="content">
    <div class="section" id="main">
        <div class="slide">
            <iframe id="iframe1" style="width: 100%; height: 100%;" src="index1.html"></iframe>
        </div>
        <div class="slide">
            <iframe id="iframe2" style="width: 100%; height: 100%" src="index2.html"></iframe>
        </div>
        <div class="slide">
            <iframe id="iframe3" style="width: 100%; height: 100%" src="index3.html"></iframe>
        </div>

    </div>

</div>

<body>


</html>